<template>
  <view class="address-container">
    <!-- <uv-navbar
      autoBack
      placeholder
      leftIconColor="#fff"
      bg-color="transparent"
      title="编辑收获地址"
    ></uv-navbar> -->
    <view class="line">
      <view class="left font14333">收货人姓名</view>
      <view class="right">
        <input
          class="font14666"
          type="text"
          v-model="form.name"
          placeholder="请输入"
          maxlength="10"
        />
      </view>
    </view>
    <view class="line">
      <view class="left font14333">收货人电话</view>
      <view class="right">
        <input
          class="font14666"
          type="number"
          v-model="form.phone"
          placeholder="请输入"
          maxlength="20"
          @blur="handleBlur"
        />
      </view>
    </view>
    <view class="line" @click="() => handleChangeCity(true)">
      <view class="left font14333">所在地区</view>
      <view class="right">
        <text
          v-if="
            form.province.length == 0 ||
            form.city.length == 0 ||
            form.area.length == 0
          "
        >
          请选择
        </text>
        <text style="padding-left: 16px" class="font14666"
          >{{ form.province }} {{ form.city }} {{ form.area }}</text
        >
      </view>
    </view>
    <CcSelectDity
      :show="selectCityShow"
      @sureSelectArea="onsetCity"
      @hideShow="() => handleChangeCity(false)"
    />
    <view class="de-add">
      <view class="top font14333">详细地址</view>
      <view class="bottom">
        <textarea
          class="font14666"
          v-model="form.detail_address"
          maxlength="100"
          placeholder="请输入详细地址"
        />
      </view>
    </view>
    <view class="switch">
      <text class="font14333">是否默认</text>
      <view class="right">
        <switch
          :checked="is_default"
          :color="is_default ? '#FF4949' : ''"
          @change="handleSwitchChange"
          style="transform: scale(0.7)"
        />
      </view>
    </view>

    <view class="address_bottom">
      <view @click="handleSubmit" class="address_bottom_btn">确定保存</view>
    </view>
  </view>
</template>

<script>
import { SetAddressApi } from "@/api/shopApi/index";
import useOrder from "@/store/order";
const { order } = useOrder();
// 使用正则表达式检查手机号格式
const phoneRegex = /^1[3|4|5|7|8][0-9]{9}$/;
import CcSelectDity from "@/components/cc-selectDity/cc-selectDity";

export default {
  components: {
    CcSelectDity
  },
  data() {
    return {
      selectCityShow: false,
      form: {
        id: 0,
        province: "",
        city: "",
        area: "",
        detail_address: "",
        name: "",
        phone: "",
        is_default: false
      },
      is_default: false
    };
  },
  onLoad(option) {
    if (option?.edit) {
      this.form = JSON.parse(decodeURIComponent(option?.edit));
      this.is_default = this.form.is_default === 1;
      uni.setNavigationBarTitle({
        title: "修改地址"
      });
    }
  },
  methods: {
    handleChangeCity(bool) {
      this.selectCityShow = bool;
    },

    handleSwitchChange(e) {
      this.is_default = e.detail.value;
    },

    handleBlur(e) {
      if (!phoneRegex.test(e.detail.value)) {
        uni.showToast({
          title: "手机号格式错误",
          icon: "error"
        });
      }
    },

    onsetCity(e) {
      this.selectCityShow = false;
      let data = e.detail.target.dataset;
      this.form.province = data.province;
      this.form.city = data.city;
      this.form.area = data.area;
    },

    async handleSubmit() {
      const { id, province, city, area, detail_address, name, phone } =
        this.form;

      if (!phoneRegex.test(phone)) {
        uni.showToast({
          title: "手机号格式错误",
          icon: "error"
        });
        return
      }

      const form_data = {
        id,
        province,
        city,
        area,
        detail_address,
        name,
        phone,
        is_default: this.is_default
      };

      const { data } = await SetAddressApi(
        form_data,
        this.form.id === 0 ? "POST" : "PUT"
      );
      if (data.error_code === 0) {
        uni.showToast({
          title: this.form.id === 0 ? "新增成功" : "修改成功",
          icon: "none"
        });

        if (order?.addressInfo?.id === this.form?.id) {
          order.addressInfo = this.form;
        }
        let timer = null;
        timer = setTimeout(() => {
          uni.navigateTo({
            url: "/pages/shop/user/address_list"
          });
          clearTimeout(timer);
        }, 500);
      } else {
        uni.showToast({
          title: data.msg || "err",
          icon: "none"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  padding-top: 20px;
}
.address-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 44px);
  background: #f9f9f9;
  overflow: hidden;

  // .address_bottom {
  //   width: 100%;
  //   position: absolute;
  //   right: 0;
  //   left: 0;
  //   bottom: calc(20px + env(safe-area-inset-bottom));
  //   height: 100rpx;
  //   display: flex;
  //   flex-direction: row;
  //   justify-content: center;
  //   align-items: center;
  // }

  .switch {
    padding: 20rpx 40rpx;
    margin: 40rpx 30rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .right {
      margin-top: 4rpx;
    }
  }

  .de-add {
    color: #fff;
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx 40rpx;
    margin: 40rpx 30rpx;

    .bottom {
      padding: 20rpx 0;
      color: #999;
      font-size: 14px;
    }
  }

  .line {
    margin: 0 4%;

    color: #fff;
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx 40rpx;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
 .left{
  white-space: nowrap
 }
    .right {
      padding-left: 20rpx;
    }
  }
}
:deep(.uni-input-placeholder){
  font-size: 28rpx !important;
}
</style>
